<!-- 1. 逻辑代码 写函数 定义数据-->

<script setup lang="ts">
import { ref } from 'vue'

let food = ref('🐔')
function changeFood() {
  if (!food.value.includes('🐥')) {
    food.value = '🏀'
  }
  food.value += '🐥'
}
const eatFood = (food: string) => {
  alert(food)
}
</script>

<!-- 2. 结构 -->
<template>
  <!-- 1. 内联语句， 直接行内写逻辑语句， 适用于较为简单的逻辑 -->
  <h2 v-on:click="food += '📕'">内联语句 - 直接写逻辑语句: {{ food }}</h2>
  <!-- 2. 处理函数， 逻辑代码区域中写函数，UI调用 -->
  <button @click="changeFood">点击</button>
  <!-- 3. 调用函数 + 传递参数 -->
  <button @click="eatFood('隆江猪脚饭')">隆江猪脚饭</button>
  <button @click="eatFood('祖传隆江猪脚饭')">祖传隆江猪脚饭</button>
  <!-- 默认的事件参数 -->
  <!-- 
    事件触发时， 浏览器会默认传递一个 【事件参数】 给函数， 内部有很多信息
    触发事件时， 如果既要获取事件参数， 又要传递自定义的参数
    可以使用 $event 替代默认的参数
    -->
</template>
<!-- 3. 样式 -->
<style scoped>
button {
  width: 50px;
}
</style>
